<template>
  <!-- 项目实施 - 10质量控制 - tab2完结项目 -->
  <div class="quality-control-end">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="整改责任人">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="整改原因">
                <el-input v-model="formData.ipt3" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 6 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <cust-act-table
          ref="custActTable"
          tableType=""
          :list="tableData"
          :colConfigs="customColumns"
          @changePage="changePage"
          @getSelectedRow="showModal"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          showIdx
          :showAct="false"
          rKey="index"
        ></cust-act-table>
      </el-col>
    </el-row>
    <el-dialog title="查看" class="table-modal" :visible.sync="tableModalState" @close="closeModal" width="800px" :close-on-click-modal="false">
      <modalBtns modalType="table" @close="closeModal"></modalBtns>
      <formName text="整改清单"></formName>
      <div class="form-content">
        <formPart listTitle="通知信息" ref="info1" modalTitle="TAB" :formList="formInfo.info1"></formPart>
        <formPart listTitle="整改结果" ref="info2" modalTitle="TAB" :formList="formInfo.info2"></formPart>
        <formPart listTitle="整改审核" ref="info3" modalTitle="TAB" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableData10_2, customColumns10_2 } from '../../js/staticData';
import custActTable from "../../components/custActTable.vue";
import advancedFilter from '../../components/advancedFilter';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart'
export default {
  name: "qualityControlEnd",
  components: {custActTable, advancedFilter, modalBtns, formName, formPart},
  data() {
    return {
      formData: {
        ipt1: '',
        ipt2: '',
        ipt3: ''
      },
      showSearch: true,
      tableModalState: false,
      customColumns: customColumns10_2,
      tableData: tableData10_2[0],
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      formInfo: {
        info1: [
          { l: '项目名称', v: '蓝旗机器人造林系统升级', span: 12 },
          { l: '项目部门', v: '信息部门', span: 6 },
          { l: '通知日期', v: '2024-08-01', span: 6 },
          { l: '整改负责人', v: '朱冠', span: 6 },
          { l: '整改期限', v: '2024-08-10', span: 6 },
          { l: '相关附件', v: '', span: 12 },
          { l: '整改原因', v: '打开采购订单功能报错，影响采购部门办理业务。', span: 12 },
          { l: '整改要求', v: '22日前联系开发分析报错原因并解决问题，保障客户正常使用。', span: 12 }
        ],
        info2: [
          { l: '整改说明', v: '', span: 24 },
          { l: '相关附件', v: '', span: 24 }
        ],
        info3: [
          { l: '审核人', v: '', span: 6 },
          { l: '整改完成', v: '否', type: 'radioGroup', list: [{l:'是', v:'0', checked: false, disabled: true},{l:'否', v:'1', checked: true, disabled: true}], span: 6 },
          { l: '完成日期', v: '', span: 6 },
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData10_2[0];
      this.customColumns = customColumns10_2;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击列表行显示弹窗
     */
    showModal() {
      this.tableModalState = true;
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal() {
      this.tableModalState = false;
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .quality-control-end {
    ::v-deep {
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .table-modal {
        .el-dialog__header {
          padding: 20px 20px 0;
        }
        .el-dialog__body {
          padding: 0 20px;
          background: #ffffff;
        }
        .cust-modal .cust-modal-bgi {
          margin-top: 10px;
        }
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .border-r {
      min-width: 220px;
      border-right: 1px solid #cccccc;
    }
  }
</style>